<script lang="ts" setup>
import type { TableColumnData } from '@arco-design/web-vue'
import { useRouteQuery } from '../composables/useRouteQuery'
import { useSearchReport } from '@/apis/report'
import { tableProps } from '@/constants/component-props'

const { query } = useRouteQuery()
const { data } = useSearchReport(query)
const columns = [
  {
    align: 'center',
    title: '班级ID',
    dataIndex: 'classID'
  },
  {
    align: 'center',
    title: '实验ID',
    dataIndex: 'experimentID'
  },
  {
    align: 'center',
    title: '学生学号',
    dataIndex: 'student'
  },
  {
    align: 'center',
    title: '报告状态',
    dataIndex: 'status'
  },
  {
    align: 'center',
    title: '分数',
    dataIndex: 'score'
  }
] as const satisfies TableColumnData[]
</script>

<template>
  <div class="card px-0">
    <h3 class="card-title px-xs">
      <i class="text-lg" />
      实验报告
    </h3>
    <a-table v-bind="tableProps" :columns :data>
      <template #th>
        <th class="arco-table-thead"></th>
      </template>
    </a-table>
  </div>
</template>
